import styled from 'styled-components'

export const LoginWrapper = styled.div`
  width: 100%;
  height: 100vh;
  .bg-canvas {
    margin: 0;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    cursor: pointer;
    background: black;
    background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
    .filter {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #fe5757;
      animation: colorChange 30s ease-in-out infinite;
      animation-fill-mode: both;
      mix-blend-mode: overlay;
    }

    @keyframes colorChange {
      0%,
      100% {
        opacity: 0;
      }
      50% {
        opacity: 0.9;
      }
    }

    .landscape {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('https://upload-images.jianshu.io/upload_images/20040970-397f531bbadc0376.png');
      background-size: 1000px 250px;
      background-repeat: repeat-x;
      background-position: center bottom;
    }
  }
  .login-form {
    width: 50%;
    height: 400px;
    margin: 0 auto;
    padding-top: 30vh;
    .form {
      width: 100%;
    }
  }
`
